<template>
  <div>
    <el-form ref="form" :model="form" style="margin-left: 200px; margin-top: 20px" label-width="120px">
      <el-form-item label="标识ID" style="width: 380px">
        <el-input v-model="form.markId" disabled></el-input>
      </el-form-item>
      <el-form-item label="页面名称" style="width: 340px">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="客户端类型">
        <el-select v-model="form.client" filterable clearable>
          <el-option label="PC" value="1"></el-option>
          <el-option label="惠配通" value="2"></el-option>
          <el-option label="惠付通" value="3"></el-option>
          <!--<el-option label="通用" value="4"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="页面说明" style="width: 420px">
        <el-input type="textarea" v-model="form.comments"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { column } from '../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        form: {
          markId: '',
          name: '',
          client: '',
          comments: ''
        }
      }
    },
    methods: {
      onSubmit () {
        this.form.createUser = this.userName
        column.view.edit(this.form, res => {
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: '编辑成功',
              type: 'success'
            })
            this.$store.dispatch('delTab', {id: 'viewa_edit'})
            this.$store.dispatch('viewState', this.$store.state.updateState.viewState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      }, // 创建
      cancel () {
        this.$store.dispatch('delTab', {id: 'viewa_edit'})
      }    // 取消
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      }
    }),
    created () {
      const data = this.$store.state.tab.uid
      // 回写数据
      column.view.detail({id: data.id}, res => {
        this.form.comments = res.content.comments
        this.form.name = res.content.name
        this.form.client = String(res.content.client)
        this.form.markId = res.content.markId
        this.form.id = res.content.id
      })
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    /*float: left;*/
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
